<template>
  <div class="tab-component">
    <button
      v-for="tab in tabs"
      :key="tab.title"
      :class="['tab-button', { active: currentTab === tab.title }]"
      @click="currentTab = tab.title"
    >
      {{ tab.displayName }}
    </button>
    <keep-alive>
      <component
        :is="currentTabComponent"
        :content="content"
        :url="url"
        class="tab"
      ></component>
    </keep-alive>
  </div>
</template>

<script>
import BookIntroduction from "./BookIntroduction";
import BookCommentList from "./BookCommentList";
import BookQA from "./BookQA";
export default {
  name: "TabComponent",
  props: {
    content: {
      type: String,
      default: "",
    },
    url: {
      type: String,
    },
  },
  data() {
    return {
      currentTab: "introduction",
      tabs: [
        { title: "introduction", displayName: "图书介绍" },
        { title: "comment", displayName: "图书评价" },
        { title: "qa", displayName: "图书问答" },
      ],
    };
  },

  components: {
    BookIntroduction,
    BookComment: BookCommentList,
    BookQa: BookQA,
  },

  computed: {
    currentTabComponent: function () {
      return "book-" + this.currentTab;
    },
  },
};
</script>
<style scoped>
div {
  width: 1028px;
  padding: 0 60px;
}
.tab-button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: solid 1px #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}
.tab-button:hover {
  background: #e0e0e0;
}
.tab-button:active {
  background: #b31616;
}
.tab {
  border: solid 1px #ccc;
  padding: 10px;
}
</style>
